<html>
<head>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="heading">
Menu element (used with <a href="interfacedoc.html">Interface</a> module)
</p>
<p class="subheading">
Description:
</p>
<p>
This element adds cascading menus to an interface. These can be multicoloured, have hilights on items
and different font sizes for each drop-down. As with other parts of Gamelib, this works with all
dynamic browsers.
</p>
<p class="subheading">
To use:
</p>
<p>
The code for this element is included in the <a href="interfacedoc.html">interface module</a>,
linked as follows:
</p>
<p class="jcode">
&lt;script language="Javascript" src="gamelib_interface.js"&gt;&lt;/script&gt;
</p>
<p>
You then build your menu(s) from <a href="menuitemdoc.html">menuItems</a> before adding them to an
interface. Menus can consist of other menus too (which could themselves consist of other menus etc
etc) which creates cascading menu trees. Here's an example of a menu with another menu under one of
the items which will cascade:
</p>

<p class="jcode">
	mySubMenu=new In_Menu(0,0,70,'Options...',80,2,'#884444','#aa8888','#ffaaaa','#ff0000');<br />
	mySubMenu.add(new In_MenuItem('Colours','alert(\'colours\')',true));<br />
	mySubMenu.add(new In_MenuItem('Workflow','alert(\'workflow\')',true));<br />
	mySubMenu.add(new In_MenuItem('File types','alert(\'file types\')',true));<br />
	mySubMenu.add(new In_MenuItem('Backups','alert(\'backups\')',true));<br />
<br />
	mySpecialMenuItem=new In_MenuItem('Open','alert(\'open\')',true);<br />
	myMenu=new In_Menu(2,2,70,'File',90,2,'#000088','#aaaaee','#ccccff','#ff0000');<br />
	myMenu.add(new In_MenuItem('New','alert(\'new\')',true));<br />
	myMenu.add(mySpecialMenuItem);<br />
	myMenu.add(mySubMenu);<br />
	myMenu.add(new In_MenuItem('Save','alert(\'Save\')',true));<br />
	myMenu.add(new In_MenuItem('Save as...','alert(\'Save as...\')',true));<br />
<br />
	myInterface.add(myMenu);<br />
</p>

<p>
As you can see, the first thing to do is create a new instance of an In_Menu object. The first 2
parameters are x,y (position relative to the interface the menu will be inside). *Note, the x,y
position is only used for a top-level menu, so any that cascade out of it do not need the x,y
set! The interface object positions the cascading menus as it builds the tree. This is why in
the example above, I've set the x,y position of the sub menu to 0,0.
</p>

<p>
The third parameter is the width of items in this menu, the forth is the heading for the menu
(like the 'File' heading you see in the top left corner of your web browser.) The last 5 are parameters
that alter the look of this dropdown. First is the opacity (IE only), then the font size for the text
(1-7), then the font colour, background colour, background colour when the mouse is over it (hilighted)
and finally background color when the item is <a href="menuitemdoc.html#disable">disabled</a>
</p>

<p>
Then all you need to do is start adding new <a href="menuitemdoc.html">menuItems</a> to the menu!
The parameters are the heading, then a javascript statement to be executed when item is clicked.
So in the example above, all the items just pop up alert boxes, but you would normally call a
function there. The third parameter is reserved for future use, but should currently always be
true. MenuItems can have their properties changed after they've been added to the menu. See 
the <a href="menuitemdoc.html">menuItem</a> docs for more information.
</p>

<p>
Finally, just add the menu to an interface. See the <a href="interfacedoc.html">interface docs</a> for
help creating an interface object.
</p>

<p>
If you wish to see an example of a more complex structure, just take a look at the
<a href="../examples/interface_example.html">example</a> included with this library.
</p>

<p class="subheading">
List of methods for Menu
</p>

<p>
<a href="#add">add</a><br>
</p>

<p class="subheading">
Descriptions of methods for Menu
</p>

<table>
<tr>
<th>Method</th><th NOWRAP>Parameters</th><th>Description</th>
</tr>

<tr>
<a name="add">
<td>add</td><td>menuItem/menu object</td><td>
Adds a menuItem or a menu to this menu object. If you add a <a href="menuitemdoc.html">menuItem</a>
it will become a clickable item in this menu. If you add another menu, it will become a cascaded
menu item in this menu.
</td>
</tr>

</table>


</body>
</html>